<template>
	<view class="component-page">
		<view class="page-header">
			<view class="back-button" @click="backToHome">
				<text class="back-icon">←</text>
				<text>返回</text>
			</view>
			<text class="page-title">打印机工具</text>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				打印机连接
			</view>
			
			<view class="printer-panel">
				<view class="status-card" :class="[printerStatus]">
					<view class="status-icon">
						<text v-if="printerStatus === 'disconnected'">🖨️</text>
						<text v-else-if="printerStatus === 'connecting'">🔄</text>
						<text v-else-if="printerStatus === 'connected'">✅</text>
						<text v-else>⚠️</text>
					</view>
					<view class="status-info">
						<text class="status-title">{{ getStatusTitle() }}</text>
						<text class="status-desc">{{ currentPrinter ? `已连接: ${currentPrinter.name || currentPrinter.deviceId}` : getStatusDesc() }}</text>
					</view>
				</view>
				
				<view class="action-buttons">
					<button 
						class="action-button scan-btn" 
						:disabled="printerStatus === 'connecting'" 
						@click="searchPrinters"
					>
						{{ printerStatus === 'connecting' ? '搜索中...' : '搜索打印机' }}
					</button>
				</view>
				
				<view class="select-printer" v-if="printerList.length > 0">
					<view class="list-header">
						<text class="header-title">可用打印机</text>
						<text class="header-count">{{ printerList.length }}个</text>
					</view>
					
					<view 
						class="printer-item" 
						v-for="(printer, index) in printerList" 
						:key="index"
						:class="{ 'connected': currentPrinter && currentPrinter.deviceId === printer.deviceId }"
						@click="connectPrinter(printer)"
					>
						<view class="printer-icon">
							<text v-if="printer.type === 'bluetooth'">📱</text>
							<text v-else-if="printer.type === 'usb'">🔌</text>
							<text v-else-if="printer.type === 'network'">🌐</text>
							<text v-else>🖨️</text>
						</view>
						<view class="printer-info">
							<text class="printer-name">{{ printer.name || '未命名打印机' }}</text>
							<text class="printer-id">{{ printer.deviceId }}</text>
							<text class="printer-type">{{ getPrinterTypeText(printer.type) }}</text>
						</view>
						<text class="printer-action" v-if="currentPrinter && currentPrinter.deviceId === printer.deviceId">
							已连接
						</text>
						<text class="printer-action" v-else>
							连接
						</text>
					</view>
				</view>
				
				<view class="empty-list" v-else-if="printerStatus === 'connecting'">
					<text class="empty-icon">🔍</text>
					<text class="empty-text">正在搜索打印机...</text>
				</view>
				
				<view class="empty-list" v-else>
					<text class="empty-icon">🖨️</text>
					<text class="empty-text">未发现打印机，请点击搜索按钮</text>
				</view>
			</view>
		</view>
		
		<view class="demo-section" v-if="currentPrinter">
			<view class="section-title">
				打印测试
			</view>
			
			<view class="print-panel">
				<view class="print-tabs">
					<view 
						class="tab-item" 
						v-for="(tab, index) in printTabs" 
						:key="index"
						:class="{ active: currentTab === index }"
						@click="currentTab = index"
					>
						{{ tab.name }}
					</view>
				</view>
				
				<view class="print-content">
					<!-- 文本打印 -->
					<view class="text-print" v-if="currentTab === 0">
						<textarea 
							class="print-textarea" 
							v-model="textToPrint" 
							placeholder="请输入要打印的文本内容"
						></textarea>
						
						<view class="text-options">
							<view class="option-group">
								<text class="option-label">字体大小</text>
								<slider 
									class="option-slider" 
									:min="1" 
									:max="3" 
									:value="textSize" 
									:step="1"
									show-value
									@change="onTextSizeChange"
								/>
							</view>
							
							<view class="option-group">
								<text class="option-label">打印样式</text>
								<view class="checkbox-group">
									<label class="checkbox-label">
										<checkbox 
											:checked="textBold" 
											@change="onTextBoldChange"
										/>
										<text>粗体</text>
									</label>
									<label class="checkbox-label">
										<checkbox 
											:checked="textUnderline" 
											@change="onTextUnderlineChange"
										/>
										<text>下划线</text>
									</label>
								</view>
							</view>
							
							<view class="option-group">
								<text class="option-label">对齐方式</text>
								<radio-group class="radio-group" @change="onAlignChange">
									<label class="radio-label" v-for="(align, i) in alignOptions" :key="i">
										<radio 
											:value="align.value" 
											:checked="textAlign === align.value"
											color="#007aff"
										/>
										<text>{{ align.name }}</text>
									</label>
								</radio-group>
							</view>
						</view>
					</view>
					
					<!-- 图片打印 -->
					<view class="image-print" v-else-if="currentTab === 1">
						<view class="image-preview">
							<image 
								v-if="imageToPrint" 
								:src="imageToPrint" 
								mode="aspectFit" 
								class="preview-image"
							></image>
							<view v-else class="no-image">
								<text class="no-image-icon">🖼️</text>
								<text class="no-image-text">未选择图片</text>
							</view>
						</view>
						
						<view class="image-options">
							<button class="image-button" @click="chooseImage">选择图片</button>
							
							<view class="option-group" v-if="imageToPrint">
								<text class="option-label">图片宽度</text>
								<slider 
									class="option-slider" 
									:min="200" 
									:max="576" 
									:value="imageWidth" 
									:step="8"
									show-value
									@change="onImageWidthChange"
								/>
							</view>
						</view>
					</view>
					
					<!-- 二维码打印 -->
					<view class="qrcode-print" v-else>
						<view class="qrcode-preview">
							<xl-qrcode 
								v-if="qrcodeToPrint" 
								:text="qrcodeToPrint"
								:size="qrcodeSize"
								:color="qrcodeColor"
								:background-color="qrcodeBackgroundColor"
								:error-correction-level="qrcodeErrorLevel"
							></xl-qrcode>
							<view v-else class="no-qrcode">
								<text class="no-qrcode-icon">📱</text>
								<text class="no-qrcode-text">请输入二维码内容</text>
							</view>
						</view>
						
						<view class="qrcode-options">
							<view class="option-group">
								<text class="option-label">二维码内容</text>
								<input 
									class="option-input" 
									v-model="qrcodeToPrint" 
									placeholder="请输入二维码内容"
								/>
							</view>
							
							<view class="option-group" v-if="qrcodeToPrint">
								<text class="option-label">二维码尺寸</text>
								<slider 
									class="option-slider" 
									:min="3" 
									:max="10" 
									:value="qrcodeSize / 50" 
									:step="1"
									show-value
									@change="onQrcodeSizeChange"
								/>
							</view>
						</view>
					</view>
				</view>
				
				<view class="print-actions">
					<button class="print-button" @click="printContent">打印</button>
					<button class="print-button disconnect-btn" @click="disconnectPrinter">断开连接</button>
				</view>
			</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">功能特性</view>
			<view class="feature-list">
				<view class="feature-item">
					<view class="feature-icon">🔍</view>
					<view class="feature-info">
						<text class="feature-title">自动设备发现</text>
						<text class="feature-desc">支持蓝牙、USB和网络打印机</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">📝</view>
					<view class="feature-info">
						<text class="feature-title">多种内容打印</text>
						<text class="feature-desc">文本、图片、条形码和二维码</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">⚙️</view>
					<view class="feature-info">
						<text class="feature-title">ESC/POS协议支持</text>
						<text class="feature-desc">兼容大多数热敏打印机</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">📊</view>
					<view class="feature-info">
						<text class="feature-title">打印模板功能</text>
						<text class="feature-desc">支持自定义小票模板和样式</text>
					</view>
				</view>
			</view>
		</view>
		<xl-printer ref="printerRef" />
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import xlPrinter from '@/components/xl-printer/index.vue';
import xlQrcode from '@/components/xl-qrcode/index.vue';

// 打印机状态，可能的值: disconnected, connecting, connected, error
const printerStatus = ref('disconnected');
// 打印机列表
const printerList = ref([]);
// 当前连接的打印机
const currentPrinter = ref(null);
// 打印机组件实例
const printerRef = ref(null);

// 打印选项卡
const printTabs = ref([
	{ name: '文本打印' },
	{ name: '图片打印' },
	{ name: '二维码打印' }
]);
// 当前选中的选项卡索引
const currentTab = ref(0);

// 文本打印相关
const textToPrint = ref('打印测试\n这是一条测试信息。\n感谢使用XL-Printer打印工具！\n\n');
const textSize = ref(1);
const textBold = ref(false);
const textUnderline = ref(false);
const textAlign = ref('left');
const alignOptions = ref([
	{ name: '左对齐', value: 'left' },
	{ name: '居中', value: 'center' },
	{ name: '右对齐', value: 'right' }
]);

// 图片打印相关
const imageToPrint = ref('');
const imageWidth = ref(384); // 默认宽度384点

// 二维码打印相关
const qrcodeToPrint = ref('https://example.com/xl-printer');
const qrcodeSize = ref(200);
const qrcodeColor = ref('#000000');
const qrcodeBackgroundColor = ref('#ffffff');
const qrcodeErrorLevel = ref('M');

// 返回首页
const backToHome = () => {
	uni.navigateBack();
};

// 获取状态标题
const getStatusTitle = () => {
	const statusMap = {
		disconnected: '未连接打印机',
		connecting: '搜索打印机中',
		connected: '打印机已连接',
		error: '连接错误'
	};
	
	return statusMap[printerStatus.value] || '未知状态';
};

// 获取状态描述
const getStatusDesc = () => {
	const statusMap = {
		disconnected: '点击搜索按钮查找打印机',
		connecting: '正在搜索可用的打印机',
		connected: '打印机已连接',
		error: '连接出错，请重试'
	};
	
	return statusMap[printerStatus.value] || '';
};

// 获取打印机类型文本
const getPrinterTypeText = (type) => {
	const typeMap = {
		bluetooth: '蓝牙打印机',
		usb: 'USB打印机',
		network: '网络打印机',
		default: '未知类型'
	};
	
	return typeMap[type] || typeMap.default;
};

// 搜索打印机
const searchPrinters = async () => {
	if (!printerRef.value) {
		uni.showToast({
			title: '打印机初始化失败',
			icon: 'none'
		});
		return;
	}
	
	printerStatus.value = 'connecting';
	printerList.value = [];
	
	try {
		// 创建打印机实例
		const success = await printerRef.value.create();
		if (!success) {
			printerStatus.value = 'error';
			return;
		}
		
		// 开始搜索打印机
		await printerRef.value.startSearch();
	} catch (error) {
		console.error('搜索打印机失败:', error);
		printerStatus.value = 'error';
		uni.showToast({
			title: '搜索打印机失败',
			icon: 'none'
		});
	}
};

// 连接打印机
const connectPrinter = async (printer) => {
	// 已连接则不重复连接
	if (currentPrinter.value && currentPrinter.value.deviceId === printer.deviceId) {
		return;
	}
	
	printerStatus.value = 'connecting';
	
	try {
		// 连接打印机
		await printerRef.value.connectToPrinter(printer);
		printerStatus.value = 'connected';
		currentPrinter.value = printer;
		
		uni.showToast({
			title: '连接成功',
			icon: 'success'
		});
	} catch (error) {
		console.error('连接打印机失败:', error);
		printerStatus.value = 'error';
		uni.showToast({
			title: '连接失败',
			icon: 'none'
		});
	}
};

// 断开打印机连接
const disconnectPrinter = async () => {
	if (!currentPrinter.value) return;
	
	try {
		await printerRef.value.disconnect();
		printerStatus.value = 'disconnected';
		currentPrinter.value = null;
		
		uni.showToast({
			title: '已断开连接',
			icon: 'success'
		});
	} catch (error) {
		console.error('断开连接失败:', error);
		uni.showToast({
			title: '断开连接失败',
			icon: 'none'
		});
	}
};

// 打印内容
const printContent = () => {
	if (!currentPrinter.value) {
		uni.showToast({
			title: '请先连接打印机',
			icon: 'none'
		});
		return;
	}
	
	if (currentTab.value === 0) {
		// 打印文本
		printText();
	} else if (currentTab.value === 1) {
		// 打印图片
		printImage();
	} else {
		// 打印二维码
		printQrcode();
	}
};

// 打印文本
const printText = async () => {
	if (!textToPrint.value.trim()) {
		uni.showToast({
			title: '请输入要打印的文本',
			icon: 'none'
		});
		return;
	}
	
	try {
		await printerRef.value.printText(textToPrint.value, {
			fontSize: textSize.value,
			bold: textBold.value,
			underline: textUnderline.value,
			align: textAlign.value
		});
		
		uni.showToast({
			title: '打印成功',
			icon: 'success'
		});
	} catch (error) {
		console.error('打印失败:', error);
		uni.showToast({
			title: '打印失败',
			icon: 'none'
		});
	}
};

// 打印图片
const printImage = async () => {
	if (!imageToPrint.value) {
		uni.showToast({
			title: '请先选择图片',
			icon: 'none'
		});
		return;
	}
	
	try {
		await printerRef.value.printImage(imageToPrint.value, {
			width: imageWidth.value,
			align: 'center'
		});
		
		uni.showToast({
			title: '打印成功',
			icon: 'success'
		});
	} catch (error) {
		console.error('打印失败:', error);
		uni.showToast({
			title: '打印失败',
			icon: 'none'
		});
	}
};

// 打印二维码
const printQrcode = async () => {
	if (!qrcodeToPrint.value.trim()) {
		uni.showToast({
			title: '请输入二维码内容',
			icon: 'none'
		});
		return;
	}
	
	try {
		await printerRef.value.printQRCode(qrcodeToPrint.value, {
			size: qrcodeSize.value / 50,
			align: 'center'
		});
		
		uni.showToast({
			title: '打印成功',
			icon: 'success'
		});
	} catch (error) {
		console.error('打印失败:', error);
		uni.showToast({
			title: '打印失败',
			icon: 'none'
		});
	}
};

// 选择图片
const chooseImage = () => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			imageToPrint.value = res.tempFilePaths[0];
		}
	});
};

// 文本大小变更
const onTextSizeChange = (e) => {
	textSize.value = e.detail.value;
};

// 文本粗体变更
const onTextBoldChange = (e) => {
	textBold.value = e.detail.value;
};

// 文本下划线变更
const onTextUnderlineChange = (e) => {
	textUnderline.value = e.detail.value;
};

// 文本对齐方式变更
const onAlignChange = (e) => {
	textAlign.value = e.detail.value;
};

// 图片宽度变更
const onImageWidthChange = (e) => {
	imageWidth.value = e.detail.value;
};

// 二维码尺寸变更
const onQrcodeSizeChange = (e) => {
	qrcodeSize.value = e.detail.value * 50;
};

// 生命周期处理
onMounted(() => {
	// 初始化打印机
	if (printerRef.value) {
		printerRef.value.create();
	}
});

onUnmounted(() => {
	// 断开打印机连接
	if (currentPrinter.value && printerRef.value) {
		printerRef.value.disconnect();
	}
});
</script>

<style lang="scss">
.component-page {
	padding: 30rpx;
	background-color: #f7f7f7;
	min-height: 100vh;
	box-sizing: border-box;
}

.page-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.back-button {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		margin-right: 20rpx;
		
		.back-icon {
			font-size: 36rpx;
			margin-right: 6rpx;
		}
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.demo-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.printer-panel {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	
	.status-card {
		display: flex;
		align-items: center;
		padding: 30rpx;
		
		&.disconnected {
			background-color: #f9f9f9;
		}
		
		&.connecting {
			background-color: #e5f7ff;
		}
		
		&.connected {
			background-color: #e5ffe5;
		}
		
		&.error {
			background-color: #ffe5e5;
		}
		
		.status-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 20rpx;
		}
		
		.status-info {
			flex: 1;
			
			.status-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
			}
			
			.status-desc {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
	
	.action-buttons {
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		.action-button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			
			&.scan-btn {
				background-color: #007aff;
				color: #fff;
				
				&:disabled {
					opacity: 0.6;
				}
			}
		}
	}
	
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		
		.header-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
		}
		
		.header-count {
			font-size: 24rpx;
			color: #666;
			background-color: #f5f5f5;
			padding: 6rpx 16rpx;
			border-radius: 30rpx;
		}
	}
	
	.select-printer {
		.printer-item {
			display: flex;
			align-items: center;
			padding: 24rpx 30rpx;
			border-bottom: 1px solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			&.connected {
				background-color: rgba(0, 122, 255, 0.05);
			}
			
			.printer-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			
			.printer-info {
				flex: 1;
				
				.printer-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 4rpx;
				}
				
				.printer-id {
					font-size: 22rpx;
					color: #999;
					margin-bottom: 4rpx;
				}
				
				.printer-type {
					font-size: 22rpx;
					color: #666;
				}
			}
			
			.printer-action {
				font-size: 24rpx;
				padding: 8rpx 20rpx;
				border-radius: 30rpx;
				background-color: #f5f5f5;
				color: #333;
			}
			
			&.connected .printer-action {
				background-color: #007aff;
				color: #fff;
			}
		}
	}
	
	.empty-list {
		padding: 60rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.empty-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
}

.print-panel {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	
	.print-tabs {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: #007aff;
				font-weight: bold;
				
				&:after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #007aff;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	.print-content {
		padding: 30rpx;
		
		// 文本打印
		.text-print {
			.print-textarea {
				width: 100%;
				height: 300rpx;
				background-color: #f9f9f9;
				border-radius: 8rpx;
				padding: 20rpx;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}
			
			.text-options {
				.option-group {
					margin-bottom: 20rpx;
					
					.option-label {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.option-slider {
						margin: 10rpx 0;
					}
					
					.checkbox-group {
						display: flex;
						
						.checkbox-label {
							display: flex;
							align-items: center;
							margin-right: 30rpx;
							font-size: 26rpx;
						}
					}
					
					.radio-group {
						display: flex;
						
						.radio-label {
							display: flex;
							align-items: center;
							margin-right: 30rpx;
							font-size: 26rpx;
						}
					}
				}
			}
		}
		
		// 图片打印
		.image-print {
			.image-preview {
				width: 100%;
				height: 300rpx;
				background-color: #f9f9f9;
				border-radius: 8rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				
				.preview-image {
					width: 100%;
					height: 100%;
				}
				
				.no-image {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.no-image-icon {
						font-size: 80rpx;
						margin-bottom: 20rpx;
					}
					
					.no-image-text {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
			
			.image-options {
				.image-button {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 28rpx;
					color: #fff;
					background-color: #007aff;
					border-radius: 40rpx;
					margin-bottom: 20rpx;
				}
				
				.option-group {
					margin-bottom: 20rpx;
					
					.option-label {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.option-slider {
						margin: 10rpx 0;
					}
				}
			}
		}
		
		// 二维码打印
		.qrcode-print {
			.qrcode-preview {
				width: 100%;
				height: 300rpx;
				background-color: #f9f9f9;
				border-radius: 8rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.no-qrcode {
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.no-qrcode-icon {
						font-size: 80rpx;
						margin-bottom: 20rpx;
					}
					
					.no-qrcode-text {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
			
			.qrcode-options {
				.option-group {
					margin-bottom: 20rpx;
					
					.option-label {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
						display: block;
					}
					
					.option-input {
						height: 80rpx;
						background-color: #f5f5f5;
						border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
					}
					
					.option-slider {
						margin: 10rpx 0;
					}
				}
			}
		}
	}
	
	.print-actions {
		display: flex;
		padding: 20rpx 30rpx;
		border-top: 1px solid #f5f5f5;
		
		.print-button {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #4cd964;
			border-radius: 40rpx;
			margin: 0 10rpx;
			
			&.disconnect-btn {
				background-color: #ff3b30;
			}
		}
	}
}

.feature-list {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 10rpx 0;
	
	.feature-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: linear-gradient(45deg, #60A5FA, #BFDBFE);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 24rpx;
		}
		
		.feature-info {
			flex: 1;
			
			.feature-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.feature-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
			}
		}
	}
}
</style> 